<template>
  <div>
    <el-dialog v-model="dialogVisible" title="事件列表" draggable width="960">
      <el-table :data="tableData" border max-height="300" style="width: 100%">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="id_" label="FID" width="50" />
        <el-table-column prop="事件编号" label="事件编号" width="140" />
        <el-table-column prop="事件类型" label="事件类型" width="85" />
        <el-table-column prop="事件等级" label="事件等级" width="85" />
        <el-table-column prop="发生时间" label="发生时间" width="140" />
        <el-table-column prop="发生地点" label="发生地点" width="85" />
        <el-table-column prop="车牌号" label="车牌号" width="90" />
        <el-table-column prop="驾驶员" label="驾驶员" width="70" />
        <el-table-column label="处理状态" width="120"
          ><template #default="data"
            ><el-select
              v-model="data.row.处理状态"
              :placeholder="data.row.处理状态"
              @change="anotherChangeEventAttr(data.row)"
            >
              <el-option label="待处理" value="0">待处理</el-option>
              <el-option label="处理中" value="1">处理中</el-option>
              <el-option label="已归档" value="2">已归档</el-option>
            </el-select>
          </template></el-table-column
        >
      </el-table>
      <!-- 分页显示 -->
      <el-pagination
        background
        small
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="events.length"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useDialog } from '@/stores/dialogSwitch.js'
import { useDialogEvents } from '@/stores/dialogEvents.js'
import { anotherChangeEventAttr } from './Hooks/useAnotherChangeEventAttr.js'
// 对话框开关
const { dialogVisible } = storeToRefs(useDialog())
// 事件信息
const { events } = storeToRefs(useDialogEvents())
// 当前页数&&每页显示的数据数目&&offset
const currentPage = ref(1)
const pageSize = ref(5)
const offset = ref(0)
// 筛选符合条件的 事件信息
const tableData = computed(() => {
  offset.value = (currentPage.value - 1) * pageSize.value
  // console.log(`一页的数据量: ${pageSize.value}`)
  // console.log(`当前页: ${currentPage.value}`)
  // console.log(offset.value)
  let eventData = events.value.map((item) => {
    const obj = item.values_.values_
    obj.id_ = item.id_
    return obj
  })
  let updateEventData = eventData.filter((item, index) => {
    return index >= offset.value && index < offset.value + pageSize.value
  })
  return updateEventData
})

//
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
}
</style>

<style scoped>
.el-pagination {
  margin-top: 10px;
}
</style>